<template>
  <div class="operationPlace">
    <img
      draggable="false"
      v-show="!showimageList"
      src="../../../assets/img/padicon12.png"
      alt=""
      style="width: 100%"
    />
    <section class="buju" v-show="showimageList">
      <div class="commodityType">
        <div class="rubikleft">
          <img draggable="false" src="../../../assets/img/padicon06.png" alt="" />
        </div>
        <div class="rubikright">
          <div class="imgone1" v-for="index in 2" :key="index">
            <img draggable="false" :src="datas.imageList[index].bgImage" alt="" />
            <!-- 标题 -->
            <div class="subtitle">
              <h5>{{ datas.imageList[index].title }}</h5>
              <p>{{ datas.imageList[index].desc }}</p>
              <span>{{datas.imageList[index].btntext}}<i class="el-icon-arrow-right"></i></span>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>
<script>
export default {
  name: "operationPlace",
  props: {
    datas: Object,
  },
  computed: {
    showimageList() {
      if (
        !this.datas.imageList[1].bgImage &&
        !this.datas.imageList[2].bgImage
      )
        return false;
      return true;
    },
  },
};
</script>
<style lang="scss" scoped>
.operationPlace{
  position: relative;
  .buju{
    .commodityType{
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      .rubikleft {
        width: 48%;
        height: 256px;
        // background: linear-gradient(180deg, #08967c 0%, #07816f 100%);
        margin-right: 10px;
        border-radius: 10px;
        position: relative;
        img {
          width: 100%;
          height: 256px;
          display: block;
          position: relative;
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
        }
      }
      .rubikright {
        width: 48%;
        .imgone1 {
          height: 120px;
          margin-bottom: 20px;
          position: relative;
          &:nth-of-type(2) {
            margin-bottom: 0 !important;
          }
          img {
            width: 100%;
            height: 120px;
            display:block;
          }
          .subtitle {
            position:absolute;
            left:10px;
            bottom:15%;
            h5 {
              font-size: 16px;
              line-height: 10px;
              color:#000000;
            }
            p {
              font-size: 12px;
              color:#888888;
            }
            span{
              font-size: 12px;
              color:#cccccc;
            }
          }
        }
      }
    }
  }
}
</style>
